<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.moreCheck {
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow: hidden;
		flex:1;
		box-sizing: border-box;
		.listApply{
			padding: 0 1.3rem;
			background-color: white;
			.item{
				display: flex;
				padding: 0.7rem 0;
				align-items: center;
				border-bottom: 1px solid #f4f4f4;
				.leftList{
					flex: 1;
					display: flex;
					align-items: center;
					.icon{
						
					}
					.name_time{
						display: flex;
						flex-direction: column;
						margin-left: 1rem;
						.name{
							color: $color2;
						}
						.time{
							color:$color3;
							margin-top: 1rem;
						}
					}
				}
				.rightList{
					flex: 0 0 3rem;
					text-align: center;
					.icon{
						img{
							width: 2rem;
						}
					}
				}
			}
		}
	}
	.flag{
		padding: 1.4rem 1.3rem 1rem 1.3rem;
		font-size: 1.7rem;
	}
	.fix-bottom{
	  position: fixed;
	  bottom: 0rem;
	  left: 0;
	  right: 0;
	  z-index: 1;
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .box{
		  flex: 1;
		  .text{
			  font-size: 1.1rem;
			  color: $color3;
		  }
		  .number{
			  font-size: 1.6rem;
			  color: $color1;
			  margin-left: 1rem;
		  }
	  }
	  .submitBtn{
		  flex: 0 0 60%;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	
	.selectAllBox{
		  background-color: white;
		  padding: 1rem;
		  display: flex;
		  align-items: center;
		  justify-content: flex-end;
		.box{
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>
<template>
	<div class="moreCheck">
		<div class="selectAllBox">
			<div class="box" @click="selectAll">
				<img src="../../assets/img/selected.svg" v-if="isSelectAll">
				<img src="../../assets/img/unselect.svg" v-else>
				<span class="margL-m fs-14">全选</span>
			</div>
		</div>
		<div class="splitLine"></div>
		<div class="listApply">
		  <div class="item" v-for="(item,index) in list" :key="index">
			  <div class="leftList">
				  <div class="icon">
					  <van-image
						round
						width="2.1rem"
						height="2.1rem"
						:src="item.avatar"
					  />
				  </div>
				  <div class="name_time">
					  <div class="name">{{item.name}}</div>
					  <div class="time">{{item.createtime}}</div>
				  </div>
			  </div>
			  <div class="rightList">
				  <div class="icon" @click="selectEvent(index)">
					  <img src="../../assets/img/selected.svg" v-if="item.selected">
					  <img src="../../assets/img/unselect.svg" v-else>
				  </div>
			  </div>
		  </div>
		  
		  <div v-if="finished==false">
		    <van-button class="load-more margB-l" :loading="loading" block @click="CourseH5Pagelist">加载更多</van-button>
		  </div>
		  <div class="no-data color-s padding-all-m" v-if="finished">已经到底了</div>
		  
		</div>  
		<div class="fix-bottom">
			<div class="box">
				<span class="text">已选人数</span>
				<span class="number">{{countSelected}}人</span>
			</div>
			<van-button round class="submitBtn" size="normal" @click="acceptEvent">同意</van-button>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import { Dialog,Toast } from 'vant';
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		data() {
			return {
				tabActive:2,
				tag:'',
				isSelectAll:false,
				countSelected:0,
				list: [],
				pageNo:1,
				pageSize: 50,
				course_id:''
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			this.tag = this.$route.query.tag
			this.course_id = this.$route.query.id
			console.log("tag",this.tag)
			console.log("tabActive",this.tabActive)
			this.RecordsPages()
		},
		methods: {
			selectEvent(index){
				this.list[index].selected = !this.list[index].selected
				if(this.list[index].selected==false){
					this.isSelectAll = false
				}
				let countSelected=0
				this.list.forEach(item=>{
					if(item.selected){
						countSelected++
					}
				})
				if(countSelected==this.list.length){
					this.isSelectAll = true
				}
				this.countSelected = countSelected
			},
			selectAll() {
				this.isSelectAll = !this.isSelectAll
				let list = this.list
				this.list.map(item=>{
					if(this.isSelectAll){
						return item.selected=true
					}else{
						return item.selected=false
					}
				})
				let countSelected=0
				this.list.forEach(item=>{
					if(item.selected){
						countSelected++
					}
				})
				this.countSelected = countSelected
			},
			acceptEvent() {
				const _this = this;
				Dialog.confirm({
				  title: '系统提示',
				  message: '是否审核所选中的报名记录？',
				})
				  .then(() => {
				    // on confirm
					_this.RecordsUpdateBMXX()
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			RecordsUpdateBMXX() {
				const _this = this;
				let id = []
				_this.list.forEach(item => {
					if(item.selected){
						id.push(item.id)
					}
				})
				let params = {
					model_id: this.$route.query.model_id,
					id:JSON.stringify(id),
					curriculum_id: _this.course_id,
					campus: this.$route.query.campus_id
				}
				console.log("params",params)
				_this.$request.RecordsUpdateBMXX(params).then(res => {
					if(res.ret == 400) {
						Toast(res.msg)
						_this.$router.go(-1)
					} else {
						Toast("操作成功")
						_this.$router.go(-1)
					}

				})
			},
			RecordsPages() {
				const _this = this;
				let params = {
					curriculum_id: _this.$route.query.id,
					status:1,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				console.log("params",params)
				_this.loading = true
				_this.$request.RecordsPages(params).then(res => {
					let data = res.data.data
					 _this.list = data
					 // _this.totle = res.data.totalCount
					// _this.list.push(...data)
					console.log("_this.list",_this.list)
					if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
						_this.finished = true;
					} else {
						_this.pageNo++
					}
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
					_this.loading = false
				})
			},
		}
	};
</script>
